<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>main</title>
    <link rel="stylesheet" href="${basePath}/static/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${basePath}/static/plugins/font-awesome/css/font-awesome.min.css" media="all">
</head>

<body>
<div class="layadmin-tabsbody-item layui-show" style=" padding:12px; ">
    <style>
        .layui-card{
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgba(153, 153, 153,.5);
            border-top: 1px solid rgba(153, 153, 153,.2);
        }
        .dcms-shortcut li {
            text-align: center;
        }
        [lay-href] {
            cursor: pointer;
        }
        .dcms-shortcut li .layui-icon {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
        .dcms-shortcut li cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

    </style>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8 layui-anim layui-anim-up">
                <div class="layui-card dcms-shortcut">
                    <div class="layui-card-header">快捷方式</div>
                    <div class="layui-card-body">
                        <ul class="layui-row layui-col-space10" id="shortcuts">

                        </ul>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4 layui-anim layui-anim-up">
                <div class="layui-card">
                    <div class="layui-card-header">版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>当前版本</td>
                                <td>
                                    v0.0.9-beta2
                                    <a href="#" target="_blank" style="padding-left: 15px;">更新日志</a>
                                </td>
                            </tr>
                            <tr>
                                <td>基于框架</td>
                                <td>
                                    layui-v2.2.6-rc2
                                </td>
                            </tr>
                            <tr>
                                <td>主要特色</td>
                                <td>权限系统 / 操作日志 / 响应式 / 多皮肤</td>
                            </tr>
                            <tr>
                                <td>获取渠道</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                        <a href="https://gitee.com/dcms/vso" target="_blank"
                                           class="layui-btn layui-btn-danger">码云</a>
                                        <a href="https://gitee.com/dcms/vso" target="_blank"
                                           class="layui-btn">立即下载</a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<script src="${basePath}/static/plugins/jq/jquery-2.2.4.min.js"></script>
<script src="${basePath}/static/plugins/layui/layui.js"></script>
<script>
    $(function () {

        $.ajax({
            url: '${basePath}/power/menu/getMyNavBar',
            type: 'POST',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                if (res.length > 0){
                    var ht = '';
                    var first = res;
                    for (var i = 0; i < first.length; i ++){
                        var f = first[i];
                        var second = f.children;
                        if (second.length == 0){
                            ht += '<li class="layui-col-xs2">\
                                        <a lay-href="'+ f.url +'" lay-id="'+ f.id +'">\
                                            <i class="layui-icon">' + f.icon + '</i>\
                                            <cite>'+ f.title +'</cite>\
                                        </a>\
                                    </li>';
                        } else {
                            for (var j = 0; j < second.length; j ++){
                                var s = second[j];
                                ht += '<li class="layui-col-xs2">\
                                        <a lay-href="'+ s.url +'" lay-id="'+ s.id +'">\
                                            <i class="layui-icon">' + s.icon + '</i>\
                                            <cite>'+ s.title +'</cite>\
                                        </a>\
                                    </li>';
                            }
                        }
                        $('#shortcuts').html(ht);

                        $('.layui-icon').hover(function () {
                            $(this).addClass('layui-anim layui-anim-scale')
                        }, function () {
                            var self = $(this);
                            setTimeout(function () {
                                self.removeClass('layui-anim layui-anim-scale')
                            }, 300);
                        });

                        $('#shortcuts').find('a').click(function () {
                            var self = $(this);

                            var options = {
                                url: self.attr('lay-href'),
                                icon: self.find('i.layui-icon').html(),
                                title: self.find('cite').text(),
                                id: self.attr('lay-id')
                            };
                            parent.tab.tabAdd(options);
                        })
                    }

                }
            }
        });


    })
</script>

</body>

</html>
